.pre(@style,@value) {
  -webkit-@{style}: @value;
  -moz-@{style}: @value;
  -ms-@{style}: @value;
  -o-@{style}: @value;
    @{style}: @value;
}

.keyframes-mixin (@name, @frames) {
  @-webkit-keyframes @name {@frames();
  }
  @-moz-keyframes @name {@frames();
  }
  @-ms-keyframes @name {@frames();
  }
  @-o-keyframes @name {@frames();
  }
  @keyframes @name {@frames();
  }
}

.keyframes-mixin(hammer,{
  0%{
    .pre(transform,rotate(0deg))
  }
  100%{
    .pre(transform,rotate(30deg))
  }
});

.smashGoldenEggs {
  position: absolute;
  top:40px;
  right:0;
  width: 100px;
  height: 95px;
  cursor:pointer;
  .imageBox {
    img {
      width: 100%;
      display: block;
      height: auto;
    }
    &.egg {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
    }
    &.hammer {
      position: absolute;
      width: 50%;
      top: 10%;
      left: 50%;
      z-index: 2;
      .pre(transform-origin,right bottom);
      .pre(animation,hammer 1s linear infinite alternate);
    }
  }
}